<style>
    #el-update {
        padding: 20px 25px 0px 0;
    }

    #el-update .layui-form-label {
        width: 88px;
    }

    #el-update .layui-input-block {
        margin-left: 120px;
    }
    #el-update .layui-textarea{
        min-height: 95px;
    }
    #railway-setQA .layui-textarea{
        min-height: 34px;
    }
    #railway-setQA{
        padding: 0px 25px 0px 0;
    }

    #railway-setQA .layui-form-label {
        width: 88px;
    }

    #railway-setQA .layui-input-block {
        margin-left: 120px;
    }
    #operateButtonGroup .layui-btn-sm{
        font-size:14px;
    }
    #operateButtonGroup .layui-btn{
        background-color: #2F4056;
    }
</style>
<style>


    .tag:not(body) {
        align-items: center;
        background-color: #f5f5f5;
        border-radius: 4px;
        color: #4a4a4a;
        display: inline-flex;
        /*! font-size:.75rem; */
        height: 2em;
        justify-content: center;
        line-height: 1.5;
        padding-left: .75em;
        padding-right: .75em;
        white-space: nowrap
    }

    a.tagfirst {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        cursor: pointer;
    }

    span.tag {
        margin-left: -5px;
        margin-right: 5px;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }

    .layui-icon {

        cursor: pointer;

    }

    .layui-icon:hover {

        color: #5a8bff;
    }
</style>
<div class="layui-fluid" id="qa-update">
    <form class="layui-form" action="" lay-filter="qa-update-form">
        <div class="layui-form-item febs-hide">
            <label class="layui-form-label febs-form-item-require">id：</label>
            <div class="layui-input-block">
                <input type="text" name="railwayId" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">原始文本：</label>
            <div class="layui-input-block">
                <textarea name="originContent" maxlength="500" class="layui-textarea" disabled></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">分词结果：</label>
            <div class="layui-input-block">
                <textarea name="segWords" maxlength="500" class="layui-textarea" disabled></textarea>
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="qa-update-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
            <!--   Railway的其他属性，都隐藏，然后底下的button按下时设置这个属性的值         -->
            <!--            <input type="text" name="isSeg">-->
            <!--            <input type="text" name="segWordsHtml">-->

            <input type="text" name="isQuestion">

            <input type="text" name="qaWordsHtml">
            <input type="text" name="question">
            <input type="text" name="answer1">
            <input type="text" name="answer2">
            <input type="text" name="answer3">
            <div id="entityWordsQATag"></div>
        </div>
    </form>
</div>
<div class="layui-fluid" id="railway-setQA">
    <form class="layui-form" action="" lay-filter="railway-setQA-form">


        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">

            </label>
            <div class="layui-input-block" id="operateButtonGroup">
                <div class="layui-btn-group">
                    <a id="qMarkButton" class="layui-btn layui-btn-sm" style="background-color: #FF5722;" >
                        标记为故障
                    </a>
                </div>
                <div class="layui-btn-group">
                    <a id="aMarkButton" class="layui-btn layui-btn-sm" style="background-color: #FFB800;" >
                        标记为引起故障的原因
                    </a>
                </div>
                <div class="layui-btn-group" >
                    <span id="qaMarkHelpIcon" class="layui-icon layui-icon-question-circle" style="font-size: 30px;"></span>
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">问答标注:</label>
            <div class="layui-input-block">
                <!-- 加载编辑器的容器 -->
                <script id="containerQA" name="content" type="text/plain" style="height:200px;">
                </script>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <span style="padding-left:40px;"><b>问题：什么导致了
                <u id="qWords" name="qWords">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>
                ？</b></span>
        </div>
        <div class="layui-form-item layui-form-text">
            <span style="padding-left:40px;">
                <b>
                    原因1:<u id="aWords1" name="aWords1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u><br/>
                </b>
            </span><br/>
            <span style="padding-left:40px;">
                <b>
                    原因2:<u id="aWords2" name="aWords2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u><br/>
                </b>
            </span><br/>
            <span style="padding-left:40px;">
                <b>
                    原因3:<u id="aWords3" name="aWords3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u><br/>
                </b>
            </span><br/>
        </div>
    </form>
</div>
<script th:src="@{ueditor/ueditor.config.js}"></script>
<script th:src="@{ueditor/ueditor.all.js}"></script>
<script data-th-inline="javascript">
    layui.use(['jquery', 'febs', 'form', 'validate'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            railway = [[${railway}]],
            hhh=[[${hhh}]],
            $view = $('#qa-update'),
            validate = layui.validate;

        var qWords=[];
        var aWords=[];

        form.verify(validate);
        form.render();

        var e1Color="#FF5722";
        var e2Color="#FFB800";
        var e1ColorRgb="rgb(255, 87, 34)";
        var e2ColorRgb="rgb(255, 184, 0)";

        var answerSpace="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        initrailwayValue();

        function initrailwayValue() {
            form.val("qa-update-form", {
                "railwayId": railway.railwayId,
                "originContent": railway.originContent,
                "isSeg":railway.isSeg,
                "segWords":railway.segWords,
                "segWordsHtml":railway.segWordsHtml,
                
            });
        }
        /***
         * @Description 设置已经标注过的E1和E2 textarea的值
         * @param e ：ueditor编辑器
         * @param elType ：数字 代表是e1 还是e2
         * @return
         * @Author wgw
         * @Date 2019-10-29
         * @Time 13:43
         */
        function setQAWords(e){
            aWords=[];
            qWords=[];
            $(e.body).find("span").each(function(index,element){
                var bgcolor=$(element).css("background-color");
                debugger;
                if(bgcolor==e1ColorRgb){
                    qWords.push($(element).text());
                }
                else if(bgcolor==e2ColorRgb){
                    aWords.push($(element).text());
                }
            });
            if(qWords.length>0){
                $("#qWords").text(qWords.join(" "));
            }else{
                $("#qWords")[0].innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
            if(aWords.length==0){
                $("#aWords1")[0].innerHTML=answerSpace;
                $("#aWords2")[0].innerHTML=answerSpace;
                $("#aWords3")[0].innerHTML=answerSpace;
            }else if(aWords.length==1){
                $("#aWords1")[0].innerHTML=aWords[0];
                $("#aWords2")[0].innerHTML=answerSpace;
                $("#aWords3")[0].innerHTML=answerSpace;
            }else if(aWords.length==2){
                $("#aWords1")[0].innerHTML=aWords[0];
                $("#aWords2")[0].innerHTML=aWords[1];
                $("#aWords3")[0].innerHTML=answerSpace;
            }else if(aWords.length>=3){
                $("#aWords1")[0].innerHTML=aWords[0];
                $("#aWords2")[0].innerHTML=aWords[1];
                $("#aWords3")[0].innerHTML=aWords[2];
            }
        }
        /***
         * @Description 给标注过的entityWordsHtml添加上el标签
         * @param content
         * @return
         * @Author wgw
         * @Date 2019-10-30
         * @Time 10:54
         */
        function setEntityWordsWithQATag(){
            debugger;
            $("#entityWordsQATag").find("span").each(function(index,element){
                var bgcolor=$(element).css("background-color");
                var elText=element.innerText;

                if(bgcolor==e1ColorRgb){

                    element.outerHTML="<e1>"+elText+"</e1>";
                }
                else if(bgcolor==e2ColorRgb){
                    element.outerHTML="<e2>"+elText+"</e2>";
                }
            });
            debugger;
            var textQA=$("#entityWordsQATag").html();
            
            return textQA;
        }
        form.on('submit(qa-update-form-submit)', function (data) {
            
            if(qWords.length==1&&(aWords.length>0&&aWords.length<=3)){
                data.field.isQuestion="1";

                ueHtml=ue.getContent();
                data.field.qaWordsHtml=ueHtml.substr(3,ueHtml.length-7);
                $("#entityWordsQATag").html(data.field.qaWordsHtml);
                data.field.question=qWords[0];
                data.field.answer1=aWords[0];
                data.field.answer2=aWords[1];
                data.field.answer3=aWords[2];
            }
            else{
                febs.alert.warn('故障或原因数目不对！标1个故障，1到3个原因');
                return false;
            }
            febs.post(ctx + 'railway/updateQA', data.field, function () {
                layer.closeAll();
                febs.alert.success('修改成功');
                $('#febs-railway-qa').find('#query').click();
            });
            return false;
        });



        $('#qaMarkHelpIcon').on("click", function () {
            febs.modal.open('操作说明', 'mark/question/qaMarkHelp', {
                area: $(window).width() <= 750 ? '90%' : '70%',
                btn2: function () {
                    layer.closeAll();
                }
            });
        });



        //比较两个字符串是否只相差一个空格
        function compareTwoString(shortString, longString) {
            //若shortString的length更长，交换shortStirng和longString
            if (shortString.length > longString.length) {
                tempString = shortString;
                shortString = longString;
                longString = tempString;
            }
            var differentChar;
            for (i = 0; i < longString.length; i++) {
                if (shortString.charAt(i) == longString.charAt(i)) {
                    continue;
                } else {
                    differentChar = longString.charAt(i);
                    //alert(differentChar);
                    //console.log((differentChar));
                    //不一样的字符是否是空格
                    return differentChar == " " ? true : false;
                }
            }

        }

        UE.registerUI('qcommand', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    //alert('execCommand:' + uiName);
                    //var te=editor.selection.getText();
                    //alert(te);

                    editor.execCommand('forecolor', '#FFFFFF'); //设置字体颜色

                    editor.execCommand('backcolor', e1Color); //设置字体背景颜色
                    var spanNode = editor.selection.getStart();
                    spanNode.innerHTML = spanNode.innerHTML + "<a class='delete'></a>";

                    setQAWords(editor);
                    //alert(te);
                    editor.selection.clearRange();
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: uiName,
                //添加额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position: -500px 0;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            return btn;
        });
        UE.registerUI('acommand', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    //alert('execCommand:' + uiName);
                    //var te=editor.selection.getText();
                    //alert(te);
                    editor.execCommand('forecolor', '#FFFFFF'); //设置字体颜色
                    editor.execCommand('backcolor', e2Color); //设置字体背景颜色
                    var spanNode = editor.selection.getStart();
                    spanNode.innerHTML = spanNode.innerHTML + "<a class='delete'></a>";

                    setQAWords(editor);
                    //alert(te);
                    editor.selection.clearRange();
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: uiName,
                //添加额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position: -500px 0;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            return btn;
        });

        var ue = UE.getEditor('containerQA', {
            toolbars: [
                []
            ],
            elementPathEnabled: false,
            wordCountMsg: false,
            wordCount: false,
            enableAutoSave: false,
            enableContextMenu: false
        });

        var contentBeforeKeydown = "", contentAfterKeyup = "", contentBeforeKeydownHtml = "", contentAfterKeyupHtml = "";
        ue.ready(function () {

            //删除toolbar
            $("#edui1_toolbarbox").remove();
            //若实体标注过设置编辑器为标记过的内容，若没有标注过则设置编辑器为分词过的内容
            if(railway.isQuestion=="1"){
                //初始化ue编辑器内容
                ue.setContent(railway.qaWordsHtml);
                //初始化qa textarea
                setQAWords(ue);

            }else{
                //初始化ue编辑器内容
                ue.setContent(railway.segWords);
            }


            contentBeforeKeydown = ue.getContentTxt();


            //ue.setDisabled();
            //点击标注按钮后执行的动作
            $('#qMarkButton').on("click", function () {
                ue.execCommand('qcommand');
            });
            $('#aMarkButton').on("click", function () {
                ue.execCommand('acommand');
            });

            //添加键盘快捷键
            ue.addshortcutkey("qcommand", "81");
            ue.addshortcutkey("acommand", "65");


            UE.dom.domUtils.on(ue.body, "keyup", function (oEvent) {
                var oEvent = oEvent || window.oEvent;
                //获取键盘的keyCode值
                var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
                if(nKeyCode == 37 || nKeyCode == 38 || nKeyCode== 39 || nKeyCode == 40||nKeyCode==65||nKeyCode==81){
                    oEvent.returnValue = true;
                }
                else if (!compareTwoString(contentAfterKeyup, contentBeforeKeydown)) {
                    ue.setContent(contentBeforeKeydownHtml, false, true);
                    oEvent.returnValue = false;
                } else {
                    oEvent.returnValue = true;
                }
            });

            //只对标注实体快捷键  按键 Q 和 A起效果，外加方向键，其他按键一律不响应
            UE.dom.domUtils.on(ue.body, "keydown", function (oEvent) {
                var oEvent = oEvent || window.oEvent;
                //获取键盘的keyCode值
                var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
                contentBeforeKeydown = ue.getContentTxt();
                contentBeforeKeydownHtml = ue.getContent();
                //alert(nKeyCode);
                if(nKeyCode == 37 || nKeyCode == 38 || nKeyCode== 39 || nKeyCode == 40||nKeyCode==65||nKeyCode==81){
                    oEvent.returnValue = true;
                }
                else{
                    oEvent.returnValue = false;
                }
            });

            $(ue.body).on("click", "a", function (event) {
                //alert($(this).text());
                var parentNode = UE.dom.domUtils.findParentByTagName(this, ["span"]);
                UE.dom.domUtils.remove(this);
                //alert(parentNode.outerHTML);
                parentNode.outerHTML = parentNode.innerText;

                setQAWords(ue);

                //fire contentchange
                ue.fireEvent('contentchange');
            });

        });

    });
</script>
